<template>
    <div class="auctionBox" :class="{'preNotice':(mt.diff(detail.auctionStartTime)>0 || mt.diff(detail.auctionEndTime)<0)}">
        <div class="con">
            <div class="status">
                <i class="iconfont icon-fanhui"></i>
                <template v-if="mt.diff(detail.auctionStartTime)>0">
                    <b>预告</b>
                    <span>{{mt.dateFormat(detail.auctionStartTime)}}开始</span>
                </template>
                <template v-else-if="mt.diff(detail.auctionStartTime)<0 && mt.diff(detail.auctionEndTime)>0">
                    <b>正在进行中</b>
                    <span>{{mt.dateFormat(detail.auctionEndTime)}} 结束</span>
                </template>
                <template v-else-if="mt.diff(detail.auctionEndTime)<0">
                    <b>拍卖结束</b>
                    <span>{{mt.dateFormat(detail.auctionEndTime)}} 结束</span>
                </template>
            </div>
            <div class="timePrice">
                <div class="price">
                    <b>{{detail.auctionCurrentPrice?detail.auctionCurrentPrice.decimalTwoString:'0.00'}}</b>
                    <p>当前出价(￥)</p>
                </div>
                <div class="time">
                    <template v-if="mt.diff(detail.auctionStartTime)>0">
                        <p>拍卖开始于</p>
                        <div class="djs">
                            <count-down v-if="detail.auctionStartTime" :type="1" :dataTime="detail.auctionEndTime"/>
                        </div>
                    </template>
                    <template v-else-if="mt.diff(detail.auctionStartTime)<0 && mt.diff(detail.auctionEndTime)>0">
                        <p>拍卖结束于</p>
                        <div class="djs">
                            <count-down v-if="detail.auctionStartTime" :type="1" :dataTime="detail.auctionEndTime"/>
                        </div>
                    </template>
                    <template v-else-if="mt.diff(detail.auctionEndTime)<0">
                        <p>拍卖已结束</p>
                        <span>{{mt.dateFormat(detail.auctionEndTime)}}</span>
                    </template>
                </div>
            </div>
            <div class="btnBox"> 
                <my-button v-if="mt.diff(detail.auctionStartTime)>0 || mt.diff(detail.auctionEndTime)<0" text="立即出价" style="color:#C5A5A5; left top no-repeat;background-size: 100% 100%;"/>
                <my-button v-else text="立即出价" style="color:#1963C9;" @click="type=1;showFlag=true"/>
            </div>
            <div class="record" @click="type=2;showFlag=true">查看出价记录</div>
        </div>
    </div>
    <my-dailog v-model:show="showFlag">
        <template v-slot:header>
            <h5 class="autDgTitle">{{type==1?'我要出价':'出价记录'}}</h5>
        </template>
        <Offer ref="offerEle" v-if="type==1"/> <!----拍卖出价-->
        <Record v-if="type==2" :id="detail.goodsId"/> <!----拍卖纪录-->
        <template v-slot:footer>
            <div class="autDgBtn">
                <div class="bItem" :class='{"oneBtn":type==2}'>
                    <my-button text="关闭" @click="showFlag=false"/>
                </div>
                <div class="bItem" v-if="type==1">
                    <my-button text="确定出价" @click="doOffer"/>
                </div>
            </div>
        </template>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import myDailog from '@/components/myDailog.vue'
import Offer from './offer.vue'
import Record from '@/components/record.vue'
import countDown from '@/components/countDown.vue'
import {mt} from '@/utils/common.js'
export default {
    props:{

    },
    components:{
        myButton,
        myDailog,
        Offer,
        Record,
        countDown
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showFlag:false,
            type:1,
            detail:computed(()=>store.state.arApi.detail),
            detailType:computed(()=>store.state.arApi.detailType)  // 1为商品详情，2为拍卖详情
        })

        const doOffer = ()=>{
            proxy.$refs.offerEle.confirmOffer()
        }

        return{
            ...toRefs(state),
            mt,
            doOffer
        }
    }
}
</script>

<style lang="scss" scoped>
    .auctionBox{
        padding: 0 40px;
        width: 100%;
        .con{
            width: 100%;
            height: 520px;
            background: rgba(25, 99, 201, 0.7);
            padding: 0 30px;
            .status{
                display: flex;
                height: 108px;
                align-items: center;
                justify-content: center;
                font-size: 28px;
                b{
                    font-weight: bold; 
                    padding: 0 20px 0 0;
                }
            }
            .timePrice{
                display: flex;
                height: 164px;
                border-top: 1px solid rgba(255, 255, 255, 0.3);
                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
                .price{
                    flex: 1;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    b{
                        font-size: 56px;
                        line-height: normal;
                        font-weight: normal;
                    }
                    p{
                        font-size: 24px;
                        color: #88A7CC;
                        padding: 5px 0 0 0;
                    }
                }
                .time{
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    width: 212px;
                    border-left: 1px solid rgba(255, 255, 255, 0.3);
                    p{
                        font-size: 24px;
                        color: #88A7CC;
                    }
                    .djs{
                        font-size: 30px;
                        padding: 5px 0 0 0;
                    }
                }
            }
            .btnBox{
                padding: 50px 0 0 0;
            }
            .record{
                display: block;
                width: 250px;
                height: 50px;
                line-height: 48px;
                border: 1px solid #FFFFFF;
                border-radius:10px ;
                text-align: center;
                font-size: 24px;
                color: #fff;
                margin: 0 auto;
                margin-top: 30px;
            }
        }
        &.preNotice{
            .con{
                background: rgba(214, 53, 53, 0.7);
                .timePrice{
                    .time{
                        p{
                            color: #CA9797;
                        }
                    }
                    .price{
                        p{
                           color: #CA9797; 
                        }
                    }
                }
            } 
            .myBtn{
                background: url('/images/nobtnbg.png') left top no-repeat;
                background-size:100% 100%;
                color: rgba(255, 255, 255, 0.3);
            }
        }
    }
    .autDgTitle{
        font-size: 40px;
        text-align: center;
        padding: 0 0 30px 0;
    }
    .autDgBtn{
        display: flex;
        padding: 30px 0 10px 0;
        .bItem{
            flex: 1;
            padding: 0 15px 0 0;
            &.oneBtn{
                padding: 0;
            }
            &+.bItem{
                padding: 0 0 0 15px;
            }
        }
    }
</style>